<template>
  <div>
    <el-select v-model="group" size="small" @change="groupChange">
      <el-option
        v-for="(item,index) in groupLists"
        :value="item.value"
        :label="item.label"
        :key="index"
      />
    </el-select>

    <el-transfer
      :filter-method="filterMethod"
      :right-default-checked="rightData1"
      :titles="['待选择', '已选择']"
      :props="{
        label:'desc',
        key:'value',
      }"
      :button-texts="['取消', '选择']"
      v-model="rightData1"
      :data="data1"
      filterable
      filter-placeholder="输入搜索"
      @change="change"/>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => { return [] }
    },
    rightData: {
      type: Array,
      default: () => { return [] }
    },
    title: {
      type: String,
      default: '选择商务'
    }

  },
  data() {
    return {
      group: [],
      data1: this.data,
      rightData1: this.rightData,
      groupLists: []
    }
  },
  watch: {
    data() {
      return this.data1 = this.data
    },
    rightData() {
      this.rightData1 = this.rightData
      this.$forceUpdate()
    }
  },
  methods: {
    groupManage() {
      this.dialogTableVisible = true
    },
    filterMethod(query, item) {
      return item.desc.indexOf(query) > -1
    },
    change(val) {
      console.log(val)
      this.$emit('change', this.rightData1)
    },
    groupChange(val) {
      console.log(val)
    }

  }
}
</script>

<style scoped>

</style>
